<template>
    <div class="position-relative lz-login">
        <img src="./../../assets/login/bg.jpg" />
        <div class="position-absolute text-center main">
            <span>欢迎登录智联空间</span>
            <input type="text" v-model.trim="userName">
            <input type="password" v-model.trim="password">
            <el-button class="btn" @click="toLogin">登录</el-button>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';
import CookieNames from './../../constant/CookieName';

export default {
    name: 'Login',
    data: function(){
        return {
            userName: '',   // 13393179066
            password: ''
        }
    },
    methods: {
        ...mapMutations({
            saveUser: 'commitUser',
            saveMenu: 'commitMenu'
        }),
        toLogin(){
            let loading = this.$loading({fullscreen: true, text: '正在登录...'});
            this.$svHttp.httpPost(this.$svHttp.Api.login, {
                userName: this.userName,
                password: this.password
            }).then(response => {
                loading.close();
                loading = null;

                if( response ){
                    let { result } = response;
                    this.saveUser(result.user);
                    // this.saveMenu(result.menuList);

                    this.$cookie.set(CookieNames.TOKEN, result.user.token);
                    this.$cookie.set(CookieNames.USER_NO, result.user.userNo);
                    this.$cookie.set(CookieNames.USER_ROLE_CODE, result.user.roleCode);

                    this.$router.push({name: 'MainPage'});
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .lz-login{
        width: 100%; height: 100%;
        color: #fff;
        background: linear-gradient(#4984FF, #0053FF);
        img{
            position: absolute;
            width: 661px; height: 404px;
            left: 0; right: 0; top: 0; bottom: 0;
            margin: auto;
            width: 100%; height: 100%;
        }
        .main{
            padding: 0 10px;
            // background: #ccc;
            width: 400px;
            height: 340px;
            left: 0; right: 0; top: 0; bottom: 0;
            margin: auto;
            span {
                display: block;
                font-size: 24px;
                margin-bottom: 63px;
            }
            input{
                display: block;
                width: 100%;
                padding-bottom: 8px;
                margin-bottom: 40px;
                background: rgba(0,0,0,0);
                border: none;
                outline: none;
                color: #fff;
                border-bottom: 2px solid rgba(255, 255, 255, .5);
            }
            .btn{
                width: 100%;
                background: #fff !important;
                font-size:20px;
                color:#2874ed;
                // margin-top: 50px;
            }
        }
    }
</style>
